<template>
	<view class="bgDefault">
		<view class="my_order" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<tn-nav-bar >我的优惠券</tn-nav-bar>
			
			<view class="coupon-list">
				<couponList :colors="colors" :couponList="couponList" @itemClick="getCoupon"></couponList>
			</view>
			
			<view class="empty__item" v-if="couponList.length < 1 && !loading" style="margin-top: 200px;">
			  <tn-empty mode="coupon"></tn-empty>
			</view>
			
			<view style="margin-top: 16px;">
				<tn-load-more v-if="couponList.length > 1"  :status="loadStatus" :fontSize="24" ></tn-load-more>
			</view>
			
			<TemplateLoading :active="loading"></TemplateLoading>
		</view>	
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import couponList from '../../../components/coupon-list/coupon-list.vue'
	import {userCoupon} from '@/api/coupon/coupon.js'
	
	export default {
		components:{TemplateLoading,couponList},
		data() {
			return {
				colors: '#FF6708',
				couponList: [],
				loading:false,
				loadStatus:"loadmore",
				selectParam:{
					page:1,
					size:10
				},
				total:0
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				this.loading = true
				userCoupon(this.selectParam).then(res=>{
					
					this.loading = false
					 this.couponList = [...this.couponList, ...res.data]
					 
					 if(res.data.length < this.selectParam.size || this.orderList.length == this.total){
						this.loadStatus = "nomore"
					 }else{
						this.loadStatus = "loadmore" 
					 }
					
					this.total = res.total
				},err=>{
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bgDefault{
		background: $tn-main-bg;
		min-height: 100vh;
	}
header-tab {
	background-color: #fff;
	width: 100%;
	height: 95rpx;
	padding: 0 3%;
	border-bottom: solid 1rpx #dedede;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	&__item, &__border {
		display: flex;
		flex-wrap: wrap;
		width: 33.3%;
		height: 90rpx;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}
	&__border {
		height: 4rpx;
		&.used {
			transform: translate3d(100%, 0, 0);
		}
		&.invalid {
			transform: translate3d(200%, 0, 0);
		}
	}
}
</style>
